<template>
    <div id="history-analysis">
        <el-drawer 
            v-model="drawerVisibles" 
            title="视频识别结果" 
            size="30%"
            :close-on-click-modal="false"
            @close="handleClose('')"
        >
            <div class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
                <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
                    <div style="box-sizing: border-box;">
                        <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                            <el-form class="box-f" ref="queryForm" :inline="true">
                                <el-form-item>
                                    <el-date-picker
                                        v-model="transferVal"
                                        type="daterange"
                                        range-separator="-"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD"
                                    />
                                </el-form-item>
                                <el-form-item class="set-s">
                                    <el-button type="primary" plain @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                                    <el-button @click='searchClick' type="primary" icon="ele-Search"> 查询 </el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>

                    <div style="box-sizing: border-box;" class="flex-1 pos-r">
                        <div class="pos-a w-h-100" style="box-sizing: border-box;">
                            <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                                <div style="" class="w-h-100 ver-flex">
                                    <div class="flex-1 pos-r">
                                        <div class="pos-a w-h-100">

                                            <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                                <el-table-column type="index" :label="$t('3eKEs1bExAXarYpdJemp')" width="55" align="center" :index="indexMethod" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="d_CreateTime" label="创建时间" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_WareHatTotal" label="戴安全帽总数" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_NoWareHatTotal" label="未戴安全帽总数" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_WareClothesTotal" label="穿反光衣总数" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="i_NoWareClothesTotal" label="未穿反光衣总数" align="center" />
                                                <el-table-column min-width="160" :show-overflow-tooltip="true" prop="endTimestamp" label="缩略图" align="center">
                                                    <template #default="scope">
                                                        <img :src="pathData + scope.row.v_FilePath" style="display: block; margin: auto; width: 30px;" />
                                                    </template>
                                                </el-table-column>
                                                <el-table-column min-width="130" label="操作" align="center" fixed="right">
                                                    <template #default="scope">
                                                        <el-button @click="playClick(pathData + scope.row.v_FilePath)" class="icon-e" icon="ele-View" size="small" text type="primary"> 查看大图 </el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                    <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                        <el-pagination
                                            v-model:currentPage="pageNo"
                                            v-model:page-size="pageSize"
                                            :total="totalRows"
                                            :page-sizes="[10, 20, 50, 100]"
                                            small
                                            background
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            class="w-h-100"
                                        />
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
        </el-drawer>
        <el-dialog
            v-model="innerVisible"
            width="30%"
            title="视频识别结果"
            append-to-body
        >
            <el-image :fit="cover" style="width: 100%;cursor:pointer;" @click="lookImg(imgPath)" :preview-src-list="[imgPath]" :src="imgPath"></el-image>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive , toRaw } from 'vue'
import getTableData from '/@/utils/getTableData'
import { SafetyHatQueryStreamResolveResultPageList } from '/@/api/its/its.ts'
import { ElMessage } from 'element-plus'
export default defineComponent( {
    name: 'history-analysis',
    components: { },
    props: {
        drawerVisible:{
            type: Boolean,
            default: false,
        },
        isUseDialog: {
            type: String,
            default: '',
        },
    },
    setup(props,ctx){
        const innerVisible = ref(false)
        const imgPath = ref('')
        let srcList:any = []
        const pathData = ref(import.meta.env.VITE_API_URL) // 获取地址

        // 搜索类
        const transferVal = ref() // 需要查询的值
        let searchObj:any = reactive({
            v_HelmetId: props.isUseDialog,
            startTime: '',
            endTime: '',
        })
        /*** searchClick 查询按钮 */
        const searchClick = () => {
            console.log(toRaw(transferVal.value),'transferVal')
            if(toRaw(transferVal.value) && toRaw(transferVal.value)!== ''){
                searchObj.startTime = toRaw(transferVal.value)[0]
                searchObj.endTime = toRaw(transferVal.value)[1]
            }else{
                ElMessage({
                    type: 'warning',
                    message: '请选择需要查询的日期',
                    duration: 1000,
                    onClose: ()=>{
                        resetClick()
                    } 
                })
            }
        }
        /*** resetClick 重置按钮 */
        const resetClick = () => {
            transferVal.value = ''

            searchObj.helmetId = props.isUseDialog
            searchObj.startTime = ''
            searchObj.endTime = ''
        }
        // 搜索类

        /*** handleClose 关闭事件 */
        const handleClose = (val:any) => {
            ctx.emit('handleAnaClose')
        }

        /*** lookImg 查看图片 */
        const lookImg = (val:any) => {
            srcList = []
            srcList.push(val.v_FilePath)
        }

        /*** playClick 查看大图 */
        const playClick = (val:any) => {
            imgPath.value = val
            innerVisible.value = true
        }


        return {
            ...getTableData(SafetyHatQueryStreamResolveResultPageList,{},searchObj),

            // 搜索类
            transferVal,
            resetClick,
            searchClick,
            // 搜索类
            
            drawerVisibles: props.drawerVisible,
            handleClose,
            innerVisible,
            imgPath,
            lookImg,
            cover: 'cover',
            playClick,
            pathData,
        }
    },
} )
</script>
<style scoped lang="scss">
    :deep(.el-link__inner){
        color: #0052D9;
    }
    :deep(.el-overlay){
        z-index: 5!important;
    }
    .el-table__fixed-body-wrapper {
        z-index: auto !important;
    }
    #history-analysis {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        :deep(.el-form-item){
            width: 328px;
            margin-right: 10px!important;
        }
        .set-s{
            width: 184px!important;
            margin-right: 0px!important;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        .video-c{
            width: 100%;
            border: 1px solid red;
            height: 100%;
            .video-c-v{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
</style>